<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>

        // 1. 可以使用 for ... of 的数据
        // 伪数组的特性
        const str = 'hello world.'
        // for (const k of str) {
        //     console.log(k);
        // }

        const arr = [1, 2, 3]
        // for (const k of arr) {
        //     console.log(k);
        // }

        const lis = document.querySelectorAll('li')
        // for (const k of lis) {
        //     console.log(k);
        // }

        // Set 数据只能传入伪数组或者数组形式的数据
        const set01 = new Set('asdasdas')
        // console.log(set01);
        // for (const k of set01) {
        //     console.log(k);
        // }

        // 对象使用for...of的方式
        const obj = {
            n: 10,
            a: 20,
            x: 'asda',
            // 自定义一个生成器，用于变成可遍历对象进行遍历
            [Symbol.iterator]: function* () {
                for (const k in obj) {
                    // yield k
                    yield obj[k]
                }
            },
            haha: function* () {
                yield 'hello'
            }
        }

        console.log(obj.haha());
        // for (const k of obj) {
        //     console.log(k);
        // }

        // const ks = Object.keys(obj)
        // console.log(ks);
    </script>
</body>

</html>